<script setup lang="ts">
import type { Banner } from '@/types/home'
import { useMemberStore } from '@/stores'
import { ref } from 'vue'

const activeIndex = ref(0)

const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail!.current
}

// 定义props接收
defineProps<{
  list: Banner[]
}>()

// 线路点击处理
const onClickTemplate = (url: string) => {
  let user_id = 0,
    split = '&'
  // 获取会员信息
  const memberStore = useMemberStore()
  if (memberStore.profile != null) {
    user_id = memberStore.profile.id
  }
  if (url.indexOf('?') == -1) {
    split = '?'
  }
  uni.navigateTo({ url: `${url}${split}user_id=${user_id}` })
}
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">
      <swiper-item v-for="it in list" :key="it.id">
        <view @click="onClickTemplate(it.href)" class="navigator">
          <image mode="aspectFill" class="image" :src="it.pic"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(it, index) in list"
        :key="it.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
@import '@/components/styles/HxSwiper.scss';
</style>
